<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        var socket;
        if (window.WebSocket) {
            socket = new WebSocket("ws://localhost:8888/ws");

            socket.onmessage = function (event) {
                var ta = document.getElementById("responesText");
                ta.value = ta.value + "\n" + event.data
            }

            socket.onopen = function (event) {
                var ta = document.getElementById("responesText");
                ta.value = "开启连接！";
            }

            socket.onclose = function (event) {
                var ta = document.getElementById("responesText");
                ta.value = "连接关闭！";
            }
        } else {
            alert("浏览器不支持webSocket!");
        }

        function send(message) {
            if (!window.WebSocket) {
                return;
            }

            if (socket.readyState == WebSocket.OPEN) {
                socket.send(message);
                document.getElementById('message').value='';
            } else {
                alert("连接尚未开启！");
            }
        }
    </script>
    <form onsubmit="return false;">
        <textarea id="message" style="width: 400px; height: 200px"></textarea>
        <input type="button" value="发送数据" onclick="send(this.form.message.value)">
        <h3>服务端输出：</h3>
        <textarea id="responesText" style="width: 400px; height: 300px"></textarea>
        <input type="button" onclick="javascript: document.getElementById('responesText').value=''" value="清空内容">
    </form>
</body>


</html>